<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title id="index-title">云监控平台</title>


    <link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
    <link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">

    <link href="/css/vendor/main.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>
</head>

<body>


<!-- 右侧内容区(除左侧菜单以外的区域) -->
<div id="right-content-container">
    <div class="top-status-bar">
        <img id="top-status-bar-expand-btn" class="button" onClick="mainM.clickMenuExpand()">
        <img class="logout button" src="/images/main/top_st_bar_logout.png" onclick="logout()"/>
        <div class="name-wrap">
            <div class="button" onClick="mainM.clickShowUserBriefInfo(event)">
                <img class="toggle" src="/images/main/top_st_bar_info_toggle.png">
                <label class="name font-bold" id="user-title-name"></label>
            </div>
            <div id="user-info-brief-wrap" onClick="mainM.clickNotRepond(event)">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <th>用户名:</th>
                    </tr>
                    <tr>
                        <td id="user-name"></td>
                    </tr>
                    <tr>
                        <td class="blank"></td>
                    </tr>
                    <tr>
                        <th>手机号:</th>
                    </tr>
                    <tr>
                        <td id="user-phone"></td>
                    </tr>
                    <tr>
                        <td class="blank"></td>
                    </tr>
                    <tr>
                        <th>邮 箱:</th>
                    </tr>
                    <tr>
                        <td id="user-email"></td>
                    </tr>
                    <tr>
                        <td class="blank"></td>
                    </tr>
                    <tr>
                        <th>系统角色:</th>
                    </tr>
                    <tr>
                        <td id="user-role-name"></td>
                    </tr>
                </table>
                <div class="detail-btn button" onClick="mainM.clickShowUserDetailInfo()">详细信息</div>
            </div>
        </div>
        <img class="user-icon button" id="user-icon-info" onClick="mainM.clickShowUserBriefInfo(event)"
             src="/images/main/main_user_icon.png">
        <div class="msg-wrap" id="top-status-bar-msg-wrap">
            <div class="button" onClick="clickTopBarMsgMenuToggle(event)">
                <img class="msg" src="/images/main/top_st_bar_msg.png">
                <span class="sup" id="message-count">0</span>
            </div>
            <div id="message-content"></div>
            <!--  此处动态加入通知消息菜单  -->
        </div>
        <div class="notice-wrap button" onClick="mainM.feedbackBox.show()">
            <img class="notice" src="/images/main/top_st_bar_bug.png">
        </div>
        {#<div class="search-wrap">#}
        {#<input type="text">#}
        {#<img class="search button" src="/images/main/top_st_bar_search.png">#}
        {#</div>#}
    </div>

    <div class="top-nav-bar">
        <img class="home button" src="/images/main/top_nav_bar_home.png"
             onclick="clickIndex()">
        <table id="nav_menu">
        </table>
    </div>

    <div class="content-container">
        <iframe style="width: 100%;height: 100%;border-width: 0px;margin: 0px;padding: 0px" name="contentFrame"
                src="/index/content">
        </iframe>
    </div>
</div>

<!-- 左侧菜单区域 -->
<div id="main-menu-wrap" class="full">
    <div class="logo-wrap" onclick="clickIndex()">
        <img class="logo" src="/images/main/main_logo.png">
        <label id="menu-title" class="title font-medium">云监控平台</label>
    </div>

    <img id="menu-user-icon" src="/images/main/main_user_icon.png">
    <p id="menu-user-name" class="font-medium"></p>
    <p id="menu-user-introduce">{{ user.roleName }}</p>
    <p id="menu-user-state"><span class="state-sign offline" id="online-status"></span><span id="online-status-text">Offline</span>
    </p>

    <div class="menu-wrap">
        <table class="menu" cellpadding="0" cellspacing="0" id="table_menu">
            {% for item in menuInfo %}


                {% if item['menuUrl'] == "" %}

                    {% if item['children'] %}
                        <tr class='m1'>
                            <td><img class="full" src='{{ item['iconUrl'] }}'><img class="simple"
                                                                                   src='{{ item['bigIconUrl'] }}'>
                                <span class='name'>{{ item['name'] }}</span>
                            </td>
                        </tr>
                    {% endif %}

                {% else %}
                    <tr class='m1'>
                        <td onclick="clickMenu('{{ item['menuUrl'] }}',null)"><img
                                    class="full" src='{{ item['iconUrl'] }}'>
                            <img class="simple" src='{{ item['bigIconUrl'] }}'>
                            <span class='name'>{{ item['name'] }}</span></td>
                    </tr>
                {% endif %}


                {% if item['children'] != null %}
                    <tr class='m2'>
                    <td>
                    <ul>
                        {% for itemChildren in item['children'] %}
                            <li class="sub_menu_item"
                                onclick="clickMenu('{{ itemChildren['menuUrl'] }}',null)">
                                <span style='background-color: {{ item['background'] }};'></span>
                                {{ itemChildren['name'] }}
                            </li>

                        {% endfor %}
                    </ul>
                {% endif %}

                {% if item['children'] != null or item['menuUrl'] != "" %}
                    </td>
                    </tr>
                    <tr class='blank'></tr>
                {% endif %}
            {% endfor %}

        </table>
    </div> <!-- .menu-wrap -->

    <div class="about-wrap full">
        <table>
            <tr>
                <td>使用说明</td>
                <td>系统支持</td>
                <td>常见问题</td>
            </tr>
            <tr class="copy-right">
                <td colspan="3">2017 Copyright Desgin by <span class="hightlight">Feimarobotics</span></td>
            </tr>
        </table>
    </div>
    <div class="about-wrap simple">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>2017</td>
            </tr>
            <tr>
                <td>Copyright</td>
            </tr>
            <tr>
                <td><span class="hightlight">Feimarobotics</span></td>
            </tr>
        </table>
    </div>
</div> <!-- #main-menu-wrap -->

<div style="display:none">
    <div id="menu_data">{{ menu_data }}</div>
</div>

</body>
<script src="/js/baidu-statistics.js"></script>
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/main.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>

<script>
    var firstMenuItem, secondMenuItem, thirdMenuItem;

    function addMenuItem(item) {
        if (item) {
            return "<td  ><span>/</span>" + item["name"] + "</td>";

        }
        return "";
    }
    function clickIndex() {

        window.contentFrame.location.href = '{{ index_url }}';
        $("#nav_menu").html("");
    }
    //点击了菜单
    function clickMenu(url, thirdMenu) {

        if (url) {
            if (url.length <= 0) {
                return;
            }
            var navMenuData = "<tr>";
            //thirdmenu为空,查找
            firstMenuItem = null;
            secondMenuItem = null;
            if (!thirdMenu) {

                var menuData = JSON.parse($("#menu_data").text());
                for (var i in menuData) {
                    var item = menuData[i];
                    firstMenuItem = item;
                    if (url == item["menuUrl"]) {
                        break;
                    }
                    var items = item["children"];
                    if (items) {
                        for (var j in items) {
                            var subMenu = items[j];
                            if (url == subMenu["menuUrl"]) {
                                secondMenuItem = subMenu;
                                break;
                            }
                        }
                    }
                    if (secondMenuItem) {
                        break;
                    }
                }

            }
            $("#nav_menu").html("");
            navMenuData += addMenuItem(firstMenuItem);
            navMenuData += addMenuItem(secondMenuItem);
            navMenuData + addMenuItem(thirdMenuItem);
            navMenuData += "</tr>";
            $("#nav_menu").html(navMenuData);
            //window.contentFrame.contentDocument.close();
            //终止掉上一次还没有加载的数据
            //直接跳转到下一个页面上
            if(browserTool.isIE()){
                window.contentFrame.document.execCommand('Stop');
            }else{
                window.contentFrame.stop();
            }
            window.contentFrame.location.href = url;
        } else {
            $("#nav_menu").html("");
        }
    }



    function logout() {

        FConfirm("您确定退出系统吗?", function (result) {
            if (result) {
                feimaPost("/user/doLogout", {}, function (result) {
                    if (result.status == 0) {
                        window.location.href = "/user/login";
                    } else {
                        FAlert(result.message);
                    }
                });
            }

        });
    }


    //接收消息推送逻辑


    $(function () {


        //请求用户信息
        requestUserInfo();

        //消息推送相关
        notificationSocket();

        MessageDataProxy.requestMessage();
    });


    mainM.userInfoNeedUpdateCallback = function () {
        console.log("用户信息已修改，请更新菜单栏的用户信息");
        requestUserInfo();
    }

    /***********    推送通知     *******/

    function notificationSocket() {
        var wsUri = "{{ web_socket }}";
        var cloudToken = '{{ token }}';
        websocket = new WebSocket(wsUri);
        websocket.onopen = function (evt) {

            var sendStr = '{"action":"connect","cloud_token":"' + cloudToken + '"}';
            websocket.send(sendStr);
        };
        websocket.onclose = function (evt) {

        };
        websocket.onmessage = function (evt) {
            datastr = evt.data.substr(0, evt.data.indexOf("SWOOLE_SOCKET_FINISH"));
            data = jQuery.parseJSON(datastr);
            if(data["action"]=="connect"){
                $("#online-status").attr("class", "state-sign online");
                $("#online-status-text").text("Online");
            }else{
                targetUrl = "/notification/detailNotification?token=" + data.token;
                mainM.showNoticeMsg({
                    title: data.message.title,
                    content: data.message.shortContent,
                    duration: 3.0,
                    clickDetail: function () {
                        mainM.showNoticeDetail(targetUrl);
                    }
                });
            }

            //writeToScreen('<span style="color: blue;">RESPONSE: '+ data.message +'</span>');
        };
        websocket.onerror = function (evt) {

            //writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
        };
    }

    /***********    用户信息     *******/

    function requestUserInfo() {

        feimaPost("/user/myProfile", {}, function (resultObj) {
            var result = resultObj.data;
            var name = result["nickname"];
            $("#user-name").text(name);
            $("#user-title-name").text(name);
            $("#user-phone").text(result["phone"]);
            $("#user-email").text(result["email"]);
            $("#user-role-name").text(result["roleName"]);
            $("#menu-user-name").text(name);
            $("#index-title").text(result["system_title"]);
            $("#menu-title").text(result["system_title"]);
            checkImg({
                icon_url:result["icon_url"],
                result:function(success,img){
                    if(success){
                        $("#user-icon-info").attr("src", img.src);
                        $("#menu-user-icon").attr("src", img.src);
                    }
                }
                });
//            $("#user-icon-info").attr("src", result["icon_url"]+"?"+Math.random());
//            $("#menu-user-icon").attr("src", result["icon_url"]+"?"+Math.random());


        });

    }
    /***********    更新未读消息     *******/

    var unReadList = false;
    function requestUnreadList() {
        feimaPost("/notification/getUnreadList", {
            start: 0,
            length: 10
        }, function (result) {
            unReadList = result.data;
            updateUnreadCount();
        });
    }


    /* 显示通知消息菜单 */
    function clickTopBarMsgMenuToggle(event) {

        event.stopPropagation();
        $("#top-bar-msg-menu").fadeIn(200);
        if ($("#top-bar-msg-menu").length > 0) {
            $("#top-bar-msg-menu").fadeOut(200, function () {
                $(this).remove();
            });
        } else {
            MessageDataProxy.updateMessageView();
            $("#top-bar-msg-menu").fadeIn(200);
            mainM.bindIframeEvent();
        }
    }

    var MessageDataProxy = {
        curIndex: 0,
        length: 10,
        curData: false,
        messageData: false,
        requestMessage: function (callBack) {
            feimaPost("/notification/getMessageList", {
                start: MessageDataProxy.curIndex,
                length: MessageDataProxy.length
            }, function (result) {
                if (result.status == 0) {
                    MessageDataProxy.curIndex += MessageDataProxy.length;
                    MessageDataProxy.curData = result.data;
                    MessageDataProxy.processMessageData(result.data.data);
                    MessageDataProxy.updateUnreadCount();
                    if (callBack) {
                        callBack(result.data);
                    }
                }
            });
        },
        processMessageData: function (appendData) {
            if (!MessageDataProxy.messageData) {
                MessageDataProxy.messageData = new Array();
            }
            for (var i = 0; i < appendData.length; i++) {
                MessageDataProxy.messageData.push(appendData[i]);
            }

        },
        //点击更多
        clickReadAll: function () {
            feimaPost("/notification/doNotiAllRead", {}, function (result) {
                if (result.status == 0) {
                    for (var i = 0; i < MessageDataProxy.messageData.length; i++) {
                        var data = MessageDataProxy.messageData[i];
                        data["read_state"] = 1;
                    }
                    $("#message-data-table").find(".unread-tag").text("");
                    MessageDataProxy.curData.unread_total = 0;
                    MessageDataProxy.updateUnreadCount();
                }

            });
        },
        clickShowMessageDetail: function (item) {
            var con = $(item);
            var tcpId = con.attr("data-id");
            con.find(".unread-tag").first().text("");
            for (var i = 0; i < MessageDataProxy.messageData.length; i++) {
                var data = MessageDataProxy.messageData[i];
                if (data["id"] == tcpId) {
                    data["read_state"] = 1;
                }
            }
            if(MessageDataProxy.curData.unread_total>0){
                MessageDataProxy.curData.unread_total -= 1;
            }

            MessageDataProxy.updateUnreadCount();
            var url = "/notification/detailNotification?tcp_id=" + tcpId;
            mainM.showNoticeDetail(url);
        },
        clickMoreNotification: function (item) {
            $(item).remove();
            MessageDataProxy.requestMessage(function (data) {
                MessageDataProxy.appendMessageView(data);
            });
        },
        updateUnreadCount: function () {
            var unReadTotal = MessageDataProxy.curData.unread_total;
            if (unReadTotal == 0) {
                $("#message-count").hide();
            } else {
                $("#message-count").show();
                $("#message-count").text(unReadTotal);
            }
        },
        appendMessageView: function (data) {
            var tableContent = "";
            for (var i = 0; i < data.data.length; i++) {
                tableContent += MessageDataProxy._appendMessageItem(data.data[i]);
            }
            if (MessageDataProxy.messageData.length < MessageDataProxy.curData.total) {
                tableContent += "<tr onclick=MessageDataProxy.clickMoreNotification(this)><td class='more button' >显示更多</td></tr>";
            }
            $("#message-data-table").append(tableContent);
        },
        updateMessageView: function () {
            var total = MessageDataProxy.curData.total;
            if (total > 0) {
                var unReadTotal = MessageDataProxy.curData.unread_total;
                var contentStr = "<div id='top-bar-msg-menu' onClick='mainM.clickNotRepond(event)'><div class='title-wrap'>" +
                        "<h3>您有<span class='unread-cnt'>" + unReadTotal + "</span>条信息未读</h3>\
                    <p class='read-all button' onclick='MessageDataProxy.clickReadAll()'>全部已读</p>\
                    </div><div class='msg-menu'><table id='message-data-table' cellpadding='0' cellspacing='0'>";
                for (var i = 0; i < MessageDataProxy.messageData.length; i++) {
                    var item = MessageDataProxy.messageData[i];
                    contentStr += MessageDataProxy._appendMessageItem(item);
                }
                if (MessageDataProxy.messageData.length < MessageDataProxy.curData.total) {
                    contentStr += "<tr onclick=MessageDataProxy.clickMoreNotification(this)><td class='more button' >显示更多</td></tr>";
                }
                contentStr += "</table></div></div>";
                $("#message-content").append(contentStr);
            }
        },
        _appendMessageItem: function (item) {
            var contentStr = "";
            var created = item['created_at'];
            var data = eval("(" + item['data'] + ")");
            var readState = item['read_state'];
            var tcpId = item['id'];
            var readStr = "未读";
            if (readState == 1) {
                readStr = "";
            }
            var message = data['message'];
            var title = "";
            var shortContent = "";
            if (message) {
                title = message.title;
                shortContent = message.shortContent ? message.shortContent : "";
                if (shortContent.length > 30) {
                    shortContent = shortContent.substr(0, 12);
                }
            }
            var clickFunc = "MessageDataProxy.clickShowMessageDetail(this)";
            //var clickFunc = " mainM.showNoticeDetail('/notification/detailNotification?tcp_id=" + tcpId + "')";
            contentStr += "<tr data-id='" + tcpId + "' onclick=" + clickFunc + "><td>";
            contentStr += "<h3>" + title + "</h3>";
            contentStr += "<p class='describe'>" + shortContent + "</p>";
            contentStr += "<p class='time'>" + created + "</p>";
            contentStr += "<p class='unread-tag'>" + readStr + "</p>";
            contentStr += "<div class='sep-line'></div>";
            contentStr += "</td></tr>";
            return contentStr;
        },
    };


</script>
</html>






